import { BaseNode, type BaseNodeParams } from './baseNode';
import { ImageNode } from '@/canvasCut/package/node/imageNode';
import { toRaw, unref } from "vue";

export interface BtnNodeConfig extends imageNodeParam {
  btnType: string;
}

/**
 * 控制按钮层
 */
export class BtnNode extends ImageNode {
  private btnType = 'move' | 'scale' | 'del' | 'rotate';
  private selectNodeBox: BaseNode;

  private btnToCanvasXY: [number, number] = [0, 0];

  constructor(param: BtnNodeConfig) {
    super({ ...param, type: 'btn' });
    super.show = false;
    this.set_type('btn');
    this.btnType = param.btnType;
  }

  /**
   * 控制元素
   * @param node
   * @param e
   */
  controllSapeNode(node: BaseNode, e) {
    if (this.btnType === 'scale') {
      this.scaleNode(toRaw(node), e);
    } else if (this.btnType === 'rotate') {
      this.rotateNode(toRaw(node), e);
    }
  }

  // 渲染按钮
  renderBtn(ctx) {
    this.render(ctx);
  }

  // 执行scale 放大缩小逻辑
  scaleNode(node: BaseNode, e: any) {
    // console.error('scaleNode', '执行scale 放大缩小逻辑', node);
    e.stopPropagation(); // 阻止事件冒泡

    const touches = e.touches;
    // 单指拖动
    const currentX = Math.ceil(touches[0].x);
    const currentY = Math.ceil(touches[0].y);
    const deltaX = currentX - this.lastX;
    const deltaY = currentY - this.lastY;

    // 计算节点中心
    const centerX = node.x + node.width / 2;
    const centerY = node.y + node.height / 2;

    // 计算手指到节点中心的距离
    const lastDistanceToCenter = Math.sqrt(Math.pow(this.lastX - centerX, 2) + Math.pow(this.lastY - centerY, 2));
    const currentDistanceToCenter = Math.sqrt(Math.pow(currentX - centerX, 2) + Math.pow(currentY - centerY, 2));

    // 根据手指到节点中心的距离变化确定缩放方向
    // 使用一个较小的系数来控制缩放速度
    const scaleFactor = 0.005;
    const scaleChange = (currentDistanceToCenter - lastDistanceToCenter) * scaleFactor;

    node.scale += scaleChange;

    // 调整节点位置，使节点中心保持不变
    const newWidth = node.originalWidth * node.scale;
    const newHeight = node.originalHeight * node.scale;
    const boxX = centerX - newWidth / 2;
    const boxY = centerY - newHeight / 2;
    node._box = {
      x: boxX,
      y: boxY,
      width: newWidth,
      height: newHeight,
    };

    // console.log('-------------------------------------------', node.scale, scaleChange)
    this.lastX = currentX;
    this.lastY = currentY;
  }

  // 旋转 节点
  rotateNode(node: BaseNode, e: any) {
    const touch = e.touches[0];

    const currentX = Math.ceil(touch.x);
    const currentY = Math.ceil(touch.y);
    const centerX = node.x + node.width / 2;
    const centerY = node.y + node.height / 2;

    // 计算上一次角度
    const lastVectorX = this.lastX - centerX;
    const lastVectorY = this.lastY - centerY;
    const lastAngle = (Math.atan2(lastVectorY, lastVectorX) * 180) / Math.PI;

    // 计算当前角度
    const currentVectorX = currentX - centerX;
    const currentVectorY = currentY - centerY;
    const currentAngle = (Math.atan2(currentVectorY, currentVectorX) * 180) / Math.PI;

    // 计算角度差
    let deltaAngle = currentAngle - lastAngle;

    // 处理角度跨越180/-180的情况，使旋转更平滑
    if (deltaAngle > 180) {
      deltaAngle -= 360;
    } else if (deltaAngle < -180) {
      deltaAngle += 360;
    }

    // 应用旋转
    node.rotation += deltaAngle;

    // console.log('------------', node.rotation, deltaAngle)

    // 更新lastX和lastY
    this.lastX = currentX;
    this.lastY = currentY;
  }

  rotateNodeEnd() {}

  setXY(x: number, y: number) {
    super.x = x;
    super.y = y;

    // this.btnToCanvasXY = [x + this.selectNodeBox.x + this.selectNodeBox.width / 2,  y + this.selectNodeBox.y + this.selectNodeBox.height / 2 + y]
    // 修复按钮坐标计算逻辑
    if (this.selectNodeBox) {
      const nodeCenterX = this.selectNodeBox.x + this.selectNodeBox.width / 2;
      const nodeCenterY = this.selectNodeBox.y + this.selectNodeBox.height / 2;
      this.btnToCanvasXY = [x + nodeCenterX, y + nodeCenterY];
    }
  }

  setSelectNodeBox(node: BaseNode) {
    this.selectNodeBox = node;
  }
  getSelectNodeBox() {
    return this.selectNodeBox;
  }

  updateShow(show: boolean) {
    this.show = show;
  }
  getShow() {
    return this.show;
  }

  // 计算角度（弧度转角度）
  calculateAngle(x, y, centerX, centerY) {
    const deltaX = x - centerX;
    const deltaY = y - centerY;
    const radians = Math.atan2(deltaY, deltaX);
    // 将角度转换为 0-360 范围
    let degrees = (radians * 180) / Math.PI;
    if (degrees < 0) {
      degrees += 360;
    }
    return degrees;
  }
}
